<template>
    <div class="schedule-calendar-date"
         :class="[type, { today: isToday, dragged: draggedIndex === index }]"
         @click="cellClick">
        <div class="schedule-calendar-date-hd">
            <div class="schedule-calendar-date-label">{{date.getDate()}}</div>
            <button type="button"
                class="schedule-calendar-counter"
                 v-if="details.length > 0">
                {{details.length}} 项
            </button>
        </div>
        <div class="schedule-calendar-details"
             :class="{ expanded }"
             :style="detailsPost"
             ref="details"  v-if="0">
            <div v-show="expanded" class="schedule-calendar-details-hd">{{ dateString }}</div>
            <div class="schedule-calendar-details-bd">
                <event-item v-if="details.length"
                    v-for="item in displayDetails"
                    :item="item"
                    :date="date"
                    :type="type"
                    :itemRender="itemRender"
                    @item-dragstart="dragItem"
                    :key="item.id">
                </event-item>
            </div>
        </div>
    </div>
</template>

<script>
    import { EventBus, isSameDay, format, Store } from './utils'
    import eventItem from './eventItem'
    // import demo from './demo'
    // import Calendar from './Calendar'

    export default {
        components: {
            eventItem
        },
        props: {
            date: Date,
            type: String,
            data: Array,
            index: Number,
            draggedIndex: Number,
            itemRender: Function
        },
        data() {
            return {
                volume: 0,
                expanded: false
            }
        },
        created(){

        },
        computed: {
            isToday() {
                return isSameDay(new Date(), this.date)
            },
            details() {
                return this.data.length ? this.data.filter(item => isSameDay(item.date, this.date)) : []
            },
            displayDetails() {
                return this.expanded ? this.details : this.details.slice(0, this.volume)
            },
            dateString() {
                return format(this.date)
            },
            detailsPost() {
                const post = {}

                if (this.index >= 35) {
                    post.bottom = 0
                } else {
                    post.top = 0
                }

                if ((this.index + 1) % 7 === 0) {
                    post.right = 0
                } else {
                    post.left = 0
                }

                return post
            }
        },
        methods: {
            calcVolume() {
                this.volume = Math.floor(this.$refs.details.clientHeight / 27)
            },
            // expandAll() {
            //     this.expanded = true
            //     document.addEventListener('mouseup', this.reduceAll)
            // },
            // reduceAll(e) {
            //     if (!this.$refs.details.contains(e.target)) {
            //         this.expanded = false
            //         Store.hasExpand = true // 设为 true，当前点击仅仅是为了收缩单元格
            //         document.removeEventListener('mouseup', this.reduceAll)
            //     }
            // },
       /*     dragenter(e) {
                if (this.$el.contains(e.target)) {
                    this.$emit('highlight', this.index)

                    if (this.$el === e.target) {
                        EventBus.$emit('cell-dragenter', e, format(this.date, 'yyyy-MM-dd'), this.type, this.index)
                    }
                }
            },*/
            dragItem(e, item, date, type) {
                this.$emit('highlight', this.index)
                EventBus.$emit('item-dragstart', e, item, format(date, 'yyyy-MM-dd'), type)
            },
            // onDrop(e) {
            //     this.$emit('highlight', -1)
            //     EventBus.$emit('item-drop', e, format(this.date, 'yyyy-MM-dd'), this.type, this.index)
            // },
            cellClick(e) {
                // 此时为收缩单页格，不触发 date-click
                if (Store.hasExpand) {
                    // 设为 false，下次正常触发 date-click
                    Store.hasExpand = false
                    return
                }
                EventBus.$emit('date-click', e, format(this.date, 'yyyy-MM-dd'), this.details)
            }
        },
        mounted() {
            this.$nextTick(function () {
                 // this.calcVolume()
                 // window.addEventListener('resize', this.calcVolume)
             })
            
        },
        destroyed() {
            // window.removeEventListener('resize', this.calcVolume)
        }
    }
</script>


<style lang="scss">
    .schedule-calendar-month{
        font-size: 0;
    }
    .schedule-calendar-date {
        position: relative;
        display: inline-block;
        vertical-align: top;
        -ms-flex-direction: column;
        flex-direction: column;
        width: calc(100% / 7);
        height: 60px;

        font-size: 14px;
        border-bottom: 1px solid #e8e8e8;
        border-left: 1px solid #e8e8e8;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        &:hover{
            background: #00aeee;
            color: #fff;
        }
    }
    .schedule-calendar-date:nth-child(7n) {
        border-right: 1px solid #e8e8e8;
    }
    .schedule-calendar-date.prev,
    .schedule-calendar-date.next {
        color: #999;
        background: #f2f2f2;
    }
    .schedule-calendar-date-label {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
    }
    .schedule-calendar-date.today .schedule-calendar-date-label {
        color: #fff;
        background: #eba300;
    }
    .schedule-calendar-date.dragged {
        background: #bbdefb;
    }
    .schedule-calendar-date.dragged .schedule-calendar-details {
        background: #bbdefb;
    }
    .schedule-calendar-date-hd {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-line-pack: center;
        align-content: center;
    }
    .schedule-calendar-details {
        -ms-flex: 1;
        flex: 1;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-line-pack: center;
        align-content: center;
    }
    .schedule-calendar-details.expanded {
        position: absolute;
        z-index: 2;
        width: 125%;
        min-width: 100%;
        padding: 0 6px 10px;
        background: #fff;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2), 0 -2px 6px rgba(0, 0, 0, 0.2);
    }
    .schedule-calendar-details.expanded .schedule-calendar-details-bd {
        overflow-y: auto;
        max-height: 270px;
    }
    .schedule-calendar-details-hd {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        color: #666;
        text-align: center;
    }
    .schedule-calendar-counter {
        font-size: 13px;
        color: #eba300;
    }
</style>
